<template>
  <div>
      <el-form :model="form" label-position="left">
          <div class="info_l">
            <div class="info_l_head">
              <div>个人基本资料</div>
              <el-divider></el-divider>
            </div>
            <div>
              <div class="info_sel">
                <div class="info_sel_l">
                  <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="籍贯" :label-width="formLabelWidth">
                    <el-select
                      class="form_select"
                      v-model="form.nativePlace"
                      placeholder="请选择籍贯"
                    >
                      <el-option label="上海" value="shanghai"></el-option>
                      <el-option label="北京" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="婚姻状况" :label-width="formLabelWidth">
                    <!-- <el-radio-group v-model="form.marriage">
                      <el-radio class="info_sel_r_groupn" label="已婚"/>
                      >
                      <el-radio class="" label="未婚" name="1"/>
                    </el-radio-group> -->
										<el-select
										  class="form_select"
										  v-model="form.marriage"
										  placeholder="请选择婚姻状况"
										>
										  <el-option label="已婚" value="1"></el-option>
										  <el-option label="未婚" value="2"></el-option>
										  <el-option label="离异" value="3"></el-option>
										  <el-option label="丧偶" value="4"></el-option>
										</el-select>
                  </el-form-item>
                </div>
                <div class="info_sel_butn">
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.sex">
											<el-radio :label="1">男</el-radio>
											<el-radio :label="2">女</el-radio>
										</el-radio-group>
                  </el-form-item>
                  <el-form-item label="出生日期" :label-width="formLabelWidth">
                    <el-date-picker
												v-model="form.birth"
												type="date"
												placeholder="选择日期">
											</el-date-picker>
                  </el-form-item>
                  <el-form-item label="民族" :label-width="formLabelWidth">
                    <el-select
                      class="form_select"
                      v-model="form.folk"
                      placeholder="请选择民族"
                    >
                      <el-option label="汉族" value="han"></el-option>
                      <el-option label="少数民族" value="shao"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.telephone" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="info_sel_butn">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img
                      class="info_sel_r_img"
                      src="../../assets/img/img.jpg"
                      alt=""
                    />
                  </el-upload>
                </div>
              </div>

              <div class="info_sel">
                <div class="info_sel_l">
                  <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form.credNum" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="info_sel_s">
                  <el-form-item label="个人编号" :label-width="formLabelWidth">
                    <el-input v-model="form.num" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="现居地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工作单位" :label-width="formLabelWidth">
                <el-input v-model="form.company" autocomplete="off"></el-input>
              </el-form-item>
              <div class="info_sel">
                <div class="info_sel_l">
                  <el-form-item label="文化程度" :label-width="formLabelWidth">
                    <el-input v-model="form.education" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="info_sel_s">
                  <el-form-item label="职务" :label-width="formLabelWidth">
                    <el-input v-model="form.job" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="既往病史" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item>
              <el-form-item label="家族史" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item>
							<el-form-item>
							    <el-button type="primary" @click="sendForm">保存</el-button>
							  </el-form-item>
              <!-- <el-form-item label="编辑时间" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="value3"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00">
                </el-date-picker>
              </el-form-item> -->
            </div>
          </div>
      </el-form>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default {
    data(){
      return{
        dialogFormVisible:true,
        form:{},
        formLabelWidth:'80px',
        // formInline:{},
      }
    },
		props:['getform'],
    methods:{
			sendForm() {
				this.$emit('getform',this.form)
			},
			// 上传
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		}
  }
</script>

<style scoped>

  .info_l{
    text-align: left;
    flex: 1;
    width:700px;
  }
.info_l_input {
  /* width: 82%; */
}
.info_l_button {
  margin-left: 10px;
}
.info_sel_r_groupn{
  margin-left: 40px;
}
.info_sel {
  display: flex;
  width:700px;
}
.info_sel_l {
  width: 50%;
}
.info_sel_r {
  width: 50%;
  margin-left: 50px;
}
.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}
.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}
.info_l /deep/ .el-select {
  width: 100%;
}
.info_l_head{
}
.pagination{
  text-align: center;
}
.top_dialog /deep/ .el-dialog{
  margin-top: 5vh !important;
}
.photog{
  width: 600px;
  height: 400px;
}
.info_sel_s_butn{
  margin:0px auto;
}
.info_sel_butn{
  margin-left:20px;
}
.info_sel_s{
  margin-left:20px;
  width:50%;

}
.add_info .el-divider--horizontal {
  margin-top: 10px;
}
</style>